<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>鼠标事件</h1>
		<ul>
			<li>onclick</li>
			<li>ondclick</li>
			<li>onmousedown</li>
			<li>onmouseup</li>
			<li>onmouseover</li>
			<li>onmouseout</li>			
			<li>onmousemove</li>
		</ul>
		<div id="div01" style="width: 300px;height: 300px;background-color: lightblue;">
			
			
		</div>
		<script type="text/javascript">
			div01.onclick = function(){div01.textContent="鼠标单击"};
			div01.ondbclick = function(){div01.textContent="鼠标双击"};
			div01.onmousedown = function(){div01.textContent="鼠标按下"};
			div01.onmouseup =  function(){div01.textContent="鼠标抬起"};
			div01.onmouseover = function(){div01.textContent="鼠标移入"};
			div01.onmouseout = function(){div01.textContent="鼠标移出"};
			div01.onmousemove = function(){div01.textContent="鼠标移动"+event.clientX+","+event.clientY};
		</script>
		
		<!-- 
			练习1
			
		-->
	</body>
</html>
